<template>
  <div class="MeetingUsage">
    <el-card>
      <!--校区选择-->
      <el-form :model="queryForm" :ref="queryForm" label-width="80px">
        <el-row :span="24">
          <el-col :span="6">
            <el-form-item label="校区" label-width="80px">
              <el-select v-model="queryForm.campus" placeholder="请选择校区" @change="changeCampus">
                <el-option
                    :value="null"
                    label="全部校区"
                    style="text-align: center"
                ></el-option>
                <el-option
                    v-for="item in campusList"
                    :key="item.id"
                    :label="item.campusName"
                    :value="item.id"
                    style="text-align: center"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="会议室">
              <!-- 会议室选择 -->
              <el-select
                  v-model="queryForm.conferenceRoomId"
                  filterable
                  :disabled="queryForm.campus === null"
                  placeholder="请选择会议室"
                  @change="changeRoom"
              >
                <el-option
                    :value="null"
                    label="全部会议室"
                ></el-option>
                <el-option
                    v-for="item in roomList"
                    :key="item.id"
                    :label="item.roomName"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="tableData" stripe>
        <el-table-column
            prop="conferenceDate"
            label="会议日期"
            min-width="100"
        >
        </el-table-column>
        <el-table-column label="时间" min-width="120">
          <template v-slot="scope">
            {{ scope.row.startTime }}-{{ scope.row.endTime }}
          </template>
        </el-table-column>

        <el-table-column label="校区" min-width="160">
          <template v-slot="scope">
            {{ getCampusName(scope.row.campus) }}
          </template>
        </el-table-column>
        <el-table-column
            prop="conferenceRoomId"
            label="会议室"
            min-width="240"
        >
          <template v-slot="scope">
            {{ getConferenceName(scope.row.conferenceRoomId) }}
          </template>

        </el-table-column>
        <el-table-column prop="topic" label="会议主题" min-width="280">
        </el-table-column>
        <el-table-column fixed="right" :label="role===0?'评分':'操作'" min-width="80">
          <template v-slot="{ row }" v-if="role===0">
            <el-button text @click="showDialog(row)" class="fun-button" v-if="row.feedback!==null">查看评分
            </el-button>
            <span v-else>暂无评分</span>
          </template>
          <template v-slot="{ row }" v-else>
            <el-button text @click="showDialog(row)" class="fun-button"
            >{{ row.feedback === null ? '评分' : '查看评分' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10]"
          :page-size="queryForm.pageSize"
          :total="queryForm.total"
          :current-page="queryForm.pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-card>


    <el-dialog
        v-model="dialogVisible"
        title="会后登记"
        @close="closeDialog"
        width="30%"
    >
      <el-form
          :inline="true"
          ref="form"
          label-width="50px"
          :disabled="dialogStatus === 'check'"
      >
        <el-col>
          <el-form-item label="设备">
            <el-radio v-model="form.isDeviceClosed" :value="true">开</el-radio>
            <el-radio v-model="form.isDeviceClosed" :value="false">关</el-radio>
          </el-form-item>
          <el-form-item label="空调">
            <el-radio v-model="form.isAcClosed" :value="true">开</el-radio>
            <el-radio v-model="form.isAcClosed" :value="false">关</el-radio>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="干净">
            <el-radio v-model="form.isNeat" :value="true">是</el-radio>
            <el-radio v-model="form.isNeat" :value="false">否</el-radio>
          </el-form-item>
          <el-form-item label="门窗">
            <el-radio v-model="form.isDoorWindowClosed" :value="true">开</el-radio>
            <el-radio v-model="form.isDoorWindowClosed" :value="false">关</el-radio>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="打分">
            <el-rate
                v-model="form.rating"
                :icon-classes="iconClasses"
                void-icon-class="icon-rate-face-off"
                :colors="['#9A99BF', '#4164b6', '#2d447a']"
                width="100"
            ></el-rate>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="备注">
            <el-input v-model="form.remarks" placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <el-button @click="closeDialog" v-if="dialogStatus !== 'check'">取 消</el-button>
      <el-button type="primary" @click="submitScore">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {afterConferenceRegister, FetchConferences, QueryScory,} from '@/api'

export default {
  data() {
    return {
      iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'], // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
      dialogVisible: false,
      dialogStatus: null,

      form: {
        conferenceId: '',
        rating: null,
        isDeviceClosed: null,
        isAcClosed: null,
        isNeat: null,
        isDoorWindowClosed: null,
        remarks: '',
      }, queryForm: {
        conferenceRoomId: null,
        timeStatus: 4,
        date: '',
        topic: '',
        roomId: '',
        campus: this.$store.getters.getUserCampus,
        dateValue: null,
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      tableData: [],
      currentConferenceId: null,
      roomList: [],
    }
  },
  methods: {
    closeDialog() {
      this.clearForm();
      this.dialogVisible = false;
      this.dialogStatus = null;
    },
    submitScore() {
      if (this.dialogStatus === 'check') {
        this.clearForm();
        this.dialogVisible = false;
        this.dialogStatus = null;

      } else {
        // 处理评分逻辑
        if (this.form.rating == null || this.form.rating === 0) {
          this.$message.warning('还没有进行评分')
        } else {
          afterConferenceRegister(this.form).then((response) => {
            if (response.code === 200) {
              this.$message.success('评分成功')
              // 关闭弹窗
              this.clearForm()

              this.dialogVisible = false;
              this.dialogStatus = null;
              this.fetch()
            }
          })
        }
      }
    },
    clearForm() {
      this.form = {
        rating: null,
        isDeviceClosed: null,
        isAcClosed: null,
        isNeat: null,
        isDoorWindowClosed: null,
        remarks: '',
      }
    },
    showDialog(row) {
      this.currentConferenceId = row.id
      if (row.feedback != null) {
        this.dialogStatus = 'check'
        this.dialogVisible = true
        QueryScory(row.feedback).then((response) => {
          if (response && response.code == 200)
            this.form = response.data
        })
      } else {
        this.dialogStatus = 'add'
        this.dialogVisible = true
        this.form.conferenceId = this.currentConferenceId
      }
    },
    changeCampus(value) {
      this.fetch()
      this.queryForm.conferenceRoomId = null;
      this.roomList = this.conferenceRoomList.filter(room => room.campus === this.queryForm.campus)

    },
    changeRoom() {
      this.fetch()
    },

    getCampusName(id) {
      if (this.campusList.length === 0) return '未知校区'
      const campus = this.campusList.find((item) => item.id === id)
      return campus ? campus.campusName : '未知校区'
    },
    getConferenceName(id) {
      if (this.conferenceRoomList.length === 0) return '未知校区'
      const conferenceRoom = this.conferenceRoomList.find((item) => item.id === id)
      return conferenceRoom ? conferenceRoom.roomName : '未知会议室'
    },
    fetch() {
      FetchConferences(this.queryForm).then((res) => {
        this.tableData = res.data.rows
        this.queryForm.total = +res.data.total
      })
    },

    handleSizeChange(newSize) {
      this.queryForm.pageSize = newSize
      this.fetch() // 当页面大小改变时重新加载数据
    },
    handleCurrentChange(newPage) {
      this.queryForm.pageNum = newPage
      this.fetch() // 当页码改变时重新加载数据
    },
    handleUpdateData() {
      this.fetch()
    },
  },
  created() {
    this.changeCampus()
  },
  computed: {
    campusList() {
      return this.$store.getters.getCampusList;
    },
    conferenceRoomList() {
      return this.$store.getters.getConferenceRoomList;
    },
    role() {
      return this.$store.getters.getRole;
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/assets/style/ConferenceUsage.less';
</style>
